<template>
    <view class="app-account">
        <view class="style-1 main-center cross-center" :style="areaStyle" v-if="data.mode == 1">
            <view v-if="data.integral == 1" @click="router(data.integer_page_url)" class="style-1-item" :style="{'background-color': data.integral_color}">
                <view :style="titleStyle">积分</view>
                <view class="number" :style="numberStyle">{{integral}}</view>
                <image :src="data.integral_icon" alt=""></image>
            </view>
            <view @click="router('/pages/balance/balance')" class="style-1-item" :style="{'background-color': data.balance_color}" v-if="data.balance == 1 && data.recharge_setting.status == 1">
                <view :style="titleStyle">余额</view>
                <view class="number" :style="numberStyle">{{balance}}</view>
                <image :src="data.balance_icon" alt=""></image>
            </view>
            <view @click="router('/pages/coupon/index/index')" class="style-1-item" :style="{'background-color': data.coupon_color}" v-if="data.coupon == 1">
                <view :style="titleStyle">优惠券</view>
                <view class="number" :style="numberStyle">{{coupon}}</view>
                <image :src="data.coupon_icon" alt=""></image>
            </view>
            <view @click="router('/pages/card/index/index')" class="style-1-item" :style="{'background-color': data.card_color}" v-if="data.card == 1">
                <view :style="titleStyle">卡券</view>
                <view class="number" :style="numberStyle">{{card}}</view>
                <image :src="data.card_icon" alt=""></image>
            </view>
        </view>
        <view class="style-3" :style="areaStyle" v-else>
            <view :class="data.mode == 2 ? 'style-2 style-list':'style-list'" class="main-center cross-center" style="height: 100%;" :style="{'background-color': data.mode == 2 ? data.card_bg : ''}">
                <view v-if="data.integral == 1" @click="router(data.integer_page_url)" class="style-3-item dir-top-nowrap mian-center cross-center">
                    <view class="number" :style="numberStyle">{{integral}}</view>
                    <view class="main-center cross-center">
                        <image v-if="data.show_icon == 1" :src="data.integral_icon" alt=""></image>
                        <view :style="titleStyle">积分</view>
                    </view>
                </view>
                <view @click="router('/pages/balance/balance')" class="style-3-item dir-top-nowrap mian-center cross-center" v-if="data.balance == 1 && data.recharge_setting.status == 1">
                    <view class="number" :style="numberStyle">{{balance}}</view>
                    <view class="main-center cross-center">
                        <image v-if="data.show_icon == 1" :src="data.balance_icon" alt=""></image>
                        <view :style="titleStyle">余额</view>
                    </view>
                </view>
                <view @click="router('/pages/coupon/index/index')" class="style-3-item dir-top-nowrap mian-center cross-center" v-if="data.coupon == 1">
                    <view class="number" :style="numberStyle">{{coupon}}</view>
                    <view class="main-center cross-center">
                        <image v-if="data.show_icon == 1" :src="data.coupon_icon" alt=""></image>
                        <view :style="titleStyle">优惠券</view>
                    </view>
                </view>
                <view @click="router('/pages/card/index/index')" class="style-3-item dir-top-nowrap mian-center cross-center" v-if="data.card == 1">
                    <view class="number" :style="numberStyle">{{card}}</view>
                    <view class="main-center cross-center">
                        <image v-if="data.show_icon == 1" :src="data.card_icon" alt=""></image>
                        <view :style="titleStyle">卡券</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    export default {
        name: "app-account",
        props: {
            value: Object,
            bg: Object
        },
        data() {
            return {
                data: {}
            }
        },
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                is_vip_card_user: function(state) {
                    return state.user.info && state.user.info.is_vip_card_user ? 1 : 0;
                }
            }),
            ...mapGetters({
                userInfo: 'user/info',
            }),
            areaStyle() {
                let style = `margin-top: ${this.data.margin}rpx;`;
                if(this.data.mode == 2) {
                    style += `padding: ${this.data.card_margin}rpx 20rpx;`
                }
                if(this.data.bg == 1) {
                    if(this.data.bg_style == 1) {
                        style += `background-color: ${this.data.bg_color};`
                    }else {
                        style += `background-image: url("${this.data.bg_pic}");background-size: 100% 100%;`
                    }
                }
                return style;
            },
            numberStyle() {
                let style = `color: ${this.data.number_color};font-size: ${this.data.number_size}rpx;`;
                if(this.data.mode != 1) {
                    style += `margin-bottom: 12rpx;`
                }
                return style;
            },
            titleStyle() {
                let style = `color: ${this.data.title_color};font-size: ${this.data.title_size}rpx;`;
                return style;
            },
            integral() {
                let value = 0;
                if(this.userInfo) {
                    value = this.handleNumber(this.userInfo.integral)
                }
                return value
            },
            balance() {
                let value = 0;
                if(this.userInfo) {
                    value = this.handleNumber(this.userInfo.balance)
                }
                return value
            },
            coupon() {
                let value = 0;
                if(this.userInfo) {
                    value = this.handleNumber(this.userInfo.coupon)
                }
                return value
            },
            card() {
                let value = 0;
                if(this.userInfo) {
                    value = this.handleNumber(this.userInfo.card)
                }
                return value
            }
        },
        created() {
            this.data = JSON.parse(JSON.stringify(this.value));
        },
        methods: {
            router(url) {
                uni.navigateTo({
                    url: url
                });
            },
            handleNumber(number) {
                let num = +number;
                num = num.toFixed(2)
                let result = 0;
                if(number > 0) {
                    if(number < 10000 && number > 999.99) {
                        result = num.replace(num[0], num[0] + ',')
                    }else if (number > 10000) {
                        result = num.substring(0,num.length - 7) + '.' + num[num.length - 7] + 'w'
                    }else {
                        result = num
                    }
                    if(result.indexOf('.00') > -1) {
                        result = result.replace('.00', '')
                    }
                    return result
                }else {
                    return 0;
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .app-account {
        .number {
            font-family: Alibaba;
            font-weight: 600;
        }
        .style-1 {
            flex-wrap: wrap;
            width: 100%;
            padding: 0 10rpx;
            .style-1-item {
                position: relative;
                // #ifndef MP-WEIXIN
                min-width: 345rpx;
                // #endif
                // #ifdef MP-WEIXIN
                min-width: 346rpx;
                // #endif
                flex-grow: 1;
                border-radius: 16rpx;
                margin: 0 10rpx 20rpx;
                padding: 20rpx 24rpx;
                image {
                    width: 100rpx;
                    height: 100rpx;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
        }
        .style-2 {
            border-radius: 16rpx;
            box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
        }
        .style-3 {
            .style-list {
                padding: 16rpx 10rpx;
                image {
                    width: 28rpx;
                    height: 28rpx;
                    margin-right: 6rpx;
                }
                .style-3-item {
                    min-width: 25%;
                    flex-grow: 1;
                    flex-shrink: 0;
                }
            }
        }
    }
</style>